<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>初识Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            初识Vue：
                1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
                2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
                3.root容器里的代码被称为[Vue模板]；
                4.Vue实例和容器是一一对应的；
                5.真实开发环境中只有一个Vue实例，并且会配合着组件一起使用；
                6.{{xxx}}中的xxx要写js表达式，且 xxx 可以自动读取到 data 中的所有属性；
                7.一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

                注意区分：js表达式 和 js代码(语句)
                    1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
                        (1). a
                        (2). a+b
                        (3). demo(1)
                        (4). x === y ? 'a' : 'b'

                    2.js代码(语句)
                        (1). if(){}
                        (2). for(){}
         -->

        <!-- 准备好一个容器 -->
        <div id="root">
            <h1>Hello, {{name.toUpperCase()}}, {{address}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示

            // 创建 Vue 实例
            new Vue({
                el: '#root', // el 用于指定当前 Vue 实例为哪个容器服务，值为 css 选择器字符串
                data: {
                    // data 中用于存储数据，数据供 el 所指定的容器去使用,值我们暂时先写成一个对象。
                    name: 'atguigu',
                    address: '北京',
                },
            });
        </script>
    </body>
</html>
